<template>
  <div class="rank1">
    <div class="top">
     <p class="title">热门景区排行</p>
     <p class="bg"></p>
   </div>
   <div class="charts" ref="rank"></div>
  </div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts'
import { ref, onMounted } from 'vue'

const rank = ref()
onMounted(()=>{
  const myCharts = echarts.init(rank.value)
  // 一个容器可以同时展示多张类型图形
  myCharts.setOption({
    title: {
      text: '景区排行',
      textStyle: {
        color: '#fff',
        fontSize: 20
      },
      // 子标题
      subtext: '各大景区排行',
      subtextStyle: {
        color: '#fff',
        fontSize: 14
      },
      right: 20,
    },
    xAxis: {type: 'category'},
    yAxis: {
      
    },
    grid: {
      left:20,
      right: 20,
      bottom: 20
    },
    tooltip: {},
    series: [
      {
        type: 'bar',
        data: [10,30,50,15,40,60],
        // 柱条样式
        itemStyle: {
          borderRadius: [10,10,0,0], // 左上 右上 左下 右下
          color: function (data: any) {
            // data 是每个 柱条
            // dataIndex 每个柱条的索引
            let arr = ['hotpink','orange','yellowgreen','pink','skyblue','purple']
            return arr[data.dataIndex]
          }
        },
        //是否显示背景颜色
        showBackground: true,
        backgroundStyle: {
          color: 'rgba(255,255,255,.5)'
        },
        label: {
          show: true,
          color: '#fff'
        },
        emphasis: {
          label: {
            fontSize: 24
          }
        },
      },
      {
        type: 'line',
        data: [10,30,50,15,40,60],
        smooth: true
      }
    ]
  })
})

</script>

<style lang="scss" scoped>
  .rank1 {
    width: 100%;
    height: 100%;
    background: url(../../images/dataScreen-main-lb.png) no-repeat;
    background-size: 100% 100%;
    .top {
      font-size: 20px;
      color: #fff;
      .title {
        margin-left: 20px;
        margin-bottom: 10px;
        margin-top: 10px;
      }
      .bg {
        background: url(../../images/dataScreen-title.png) no-repeat;
        background-size: 100% 100%;
        width: 68px;
        height: 7px;
        margin-left: 20px;
        
      }
      .txt-right {
        text-align: right;
        margin-right: 20px;
        span {
          color: yellowgreen;
        }
      }
    }
    .charts {
      height: 300px;
      margin-top: 20px;
    }
  }
</style>
